<template>
  <div class="pp-container">
    <el-scrollbar class="center-scrollbar">
      <div class="processBox" v-show="processNode1.length">
        <div
          class="inlineBlock"
          v-for="(item, index) in processNode1"
          :key="index"
          :class="reClass('top', index, processNode1.length, item)"
        >
          <div class="processNode " >
            {{ item.serviceName }}
          </div>
        </div>
      </div>

      <div class="processBox" v-show="processNode2.length">
        <div
          class="inlineBlock"
          v-for="(item, index) in processNode2"
          :key="index"
          :class="reClass('middle', index, processNode2.length, item)"
        >

          <div class="processNode " >
            {{ item.serviceName }}
          </div>
        </div>
      </div>

      <div class="processBox" v-show="processNode3.length">
        <div
          class="inlineBlock"
          v-for="(item, index) in processNode3"
          :key="index"
          :class="reClass('bot', index, processNode3.length, item)"
        >
          <div class="processNode processNodeLast" >
            {{ item.serviceName }}
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import {
  operatingService
} from "@/api/console/group";
export default {
  props: {
    securityServices: Array,
    isEdit: Boolean,
    isLondingAni: Boolean,
  },
  data () {
    return {
      processNode1: [],
      processNode2: [],
      processNode3: [],
    };
  },
  mounted () {
    this.initData();
  },
  methods: {
    switchTypeFn (item) {
      operatingService({
        "checkStatus": item.checkStatus ? "0" : "1",
        "nodeId": item.nodeId,
        "id": item.serviceId,
      }).then(response => {
        let checkstatus = item.checkStatus ? "停止服务" : "开始启动"
        this.msgSuccess(checkstatus);

      });
      console.log(item);
    },
    initData () {
		if(!this.securityServices)return false;
		
      this.securityServices.map((item) => {
        if (item.serviceLevelFirst == 1) {
          this.processNode1.push(item)
        }

        if (item.serviceLevelFirst == 2) {
          this.processNode2.push(item)
        }

        if (item.serviceLevelFirst == 3) {
          this.processNode3.push(item)
        }

      })

      this.arrSort(this.processNode1);
      this.arrSort(this.processNode2);
      this.arrSort(this.processNode3);
			
			this.$nextTick(function(){
				let dom = document.getElementsByClassName('el-scrollbar__wrap')[0];
				dom.style.marginRight = '-20px';
				dom.style.marginBottom = '-20px';
			})
      // console.log(this.processNode1)

    },
    arrSort (newarr) {
      /**  冒泡法排序
      * 插入发排序，即那数组的前一项和后一项对比，如果前面一项小于后面
      * 一项，则将两者位置互换，从数组第1个元素开始对比；如下示例
      */
      if (newarr.length < 2) {
        return newarr;
      }

      for (let i = 0; i < newarr.length; i++) {
        for (let j = 0; j < newarr.length; j++) {
          if (newarr[j + 1]) {
            if (newarr[j].serviceLevelSecond > newarr[j + 1].serviceLevelSecond) {
              let pre = newarr[j];
              newarr[j] = newarr[j + 1];
              newarr[j + 1] = pre;
            };
          }
        };
      };
      return newarr;

    },
    //计算返回class
    reClass (type, index, len, item) {
      let className = '';
      let bgColor = '';
      if (item.checkStatus == false) {
        bgColor = 'grayBg'
      } else {
        bgColor = 'greenBg'
      }


      if (type == "top") {
        

        if (index == 0 && index != len - 1) {
          className = "topFrist";
        } else if (index == 0 && index == len - 1 && this.processNode2.length) {
          className = "topFristEnd";
        } else if (index == 0 && index == len - 1 && this.processNode2.length == 0) {
          className = "";
        } else if (index != 0 && index == len - 1) {
          className = "topEnd";
        } else {
          className = "topMiddle"
        }
		
		if (this.processNode2.length == 0) {
			if (index == 0 && index == len - 1) {
				className = "";
			} else if (index != 0 && index == len - 1) {
				className = "";
			} else {
				className = "topOneLeft";
			}
		}
      } else if (type == "middle") {
        if (index == 0 && index == len - 1) {
          className = "";
        } else if (index != 0 && index == len - 1) {
          className = "";
        } else {
          className = "topOneLeft";
        }
      } else if (type == "bot") {
        if (index == 0 && index != len - 1) {
          className = "botFrist";
        } else if (index == 0 && index == len - 1) {
          className = "botFristEnd";
        } else if (index != 0 && index == len - 1) {
          className = "botEnd";
        } else {
          className = "botMiddle"
        }
      }


      return className + " " + bgColor;
    }
  }
}
</script>
<style>
</style>
<style scoped>
.center-scrollbar,
.left-scrollbar {
  height: calc(100% - 42px);
  overflow: hidden;
  border: 0px;
}
.fontSizi16 {
  font-size: 15px;
}
.fontSizi16 .grid-left {
  width: 90px;
  text-wrap: none;
  padding-bottom: 6px;
}

.fontSizi16 .grid-right {
  width: 70px;
  text-wrap: none;
}
</style>
<style scoped lang="scss">
/********* 流程css ****************/
.processBox {
  white-space: nowrap;
}

.contentBox {
  padding: 10px;
  font-size: 16px;
}

.contentBox .grid-left {
}

.contentBox .grid-right {
  width: auto;
  margin-bottom: 10px;
}

.contentBox .textRight {
  text-align: right;
}

.pp-container .center-scrollbar,
.left-scrollbar {
  height: calc(100% - 42px);
  overflow: hidden;
  padding-left: 10px;
  border: 0px;
}
.processNode {
  display: inline-block;
  height: 30px;
  width: 80px;
  line-height: 30px;
  text-align: center;
  background-color: #b2daff;
  border-radius: 5px;
  margin-right: 32px;
  margin-bottom: 34px;
  white-space: nowrap;
  overflow: hidden;
  padding: 0px 10px;
  text-overflow: ellipsis;

  position: relative;
}
.processNodeLast{
	margin-bottom: 10px;
}
.processCur {
  cursor: pointer;
}
.processBox .greenBg .bgColor {
  background-color: #8ec2f2;
}

.grayBg .processNode {
  background-color: #9b9b9b;
}
.greenBg .processNode {
  background-color: #4caf50;
  color: #ffffff;
}

.processNode .el-icon-close {
  position: absolute;
  top: 3px;
  left: 130px;
}

.botAddBtn {
  margin-left: 10px;
}
.inlineBlock {
  display: inline-block;
  position: relative;
}

.inlineBlock::after {
  content: '';
  display: inline-block;
  height: 30px;
  position: absolute;
  background-size: cover;
}

.inlineBlock::before {
  content: '';
  display: inline-block;
  height: 30px;
  position: absolute;
  background-size: cover;
}

.topFrist::after {
	width: 55px;
	top: 33px;
	left: 20px;
	background-size: contain;
	background-image: url(./step/bottom01.png);
}

.topFrist::before,
.topMiddle::before,
.botFrist::before,
.botMiddle::before,
.topOneLeft::before {
  width: 35px;
	top: 0px;
	left: 79px;
	background-size: 100% 100%;
  background-image: url(./step/left.png);
}

.topFristEnd::after {
  width: 55px;
  top: 33px;
  left: 20px;
  background-size: contain;
  background-image: url(./step/bottom01.png);
}
.topEnd::after {
//   width: 200px;
//   top: 31px;
//   left: -65px;
//   background-image: url(./step/end01.png);
}
.topMiddle::after {
//   width: 250px;
//   top: 30px;
//   left: -70px;
//   background-image: url(./step/bottom031.png);
}

.botFrist::after {
  width: 50px;
  top: -35px;
  left: 20px;
  background-image: url(./step/top01.png);
  background-size: contain;
}

.botFristEnd::after {
	width: 50px;
    top: -35px;
    left: 20px;
    background-image: url(./step/top01.png);
    background-size: contain;
}
.botEnd::after {
//   width: 200px;
//   top: -60px;
//   left: -50px;
//   background-image: url(./step/botend01.png);
}

.botMiddle::after {
//   width: 250px;
//   top: -60px;
//   left: -50px;
//   background-image: url(./step/top031.png);
}
</style>
